<template>
	<view>
		<form>
			<view class="top-input">
				<textarea cols="70" type="text" v-model="text.advice" placeholder="请描述您遇到的问题..." />
			</view>
			<view class="header-input">
				<input type="text" v-model="text.contact" placeholder="[选填]联系方式(QQ/微信/手机号)" />
			</view>
			<view style="display: flex; flex-direction: row; justify-content: space-around; align-items: center;">
			<image src="../../static/提交反馈.png" style="width: 110upx; height: 110upx;margin-left: 30upx;" ></image>
			<button class="footer-button" form-type="reset" @click="submite">提交反馈</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: {
					advice: '',
					contact:''
				}
			}
		},
		methods: {
			submite() {
				// console.log(this.text)
				uni.request({
					url:'/api/retroaction',
					method:'POST',
					data:this.text,
					success:(res) => {
							// console.log(res.data);
							uni.showToast({
								title:'提交成功',
								duration: 2000
							});
							this.text = res.data
						}
				});
			}
		}
	}
</script>

<style>
	body {
		background-color: #FFFFFF;
	}
	.top-input {
		color: #9dadb8;
		border: 5upx solid #55aa7f;
		border-radius: 15upx;
		height: 400rpx;
		background-color: #f1f7f5;
		margin: 34rpx;
		padding: 42rpx;
	}
	.top-input textarea {
		
	}
	.header-input {
		margin: 0 35rpx 50rpx;
		border: 4upx solid #637c47;
		text-align: center;
		height: 70rpx;
		background-color: #f9f9f9;
		border-radius: 15upx;
		padding-top: 35rpx;
	}
	.header-input input {
		
	}
	.footer-button {
		background-color: #63aaeb;
		height: 95rpx;
		width: 450upx;
		color: #FFFFFF;
		font-size: 36rpx;
		margin: 35rpx;
		border: none;
	}
</style>
